<!DOCTYPE html>
<html lang="en">

<head>
    <title>挑战战局</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../../css/public.css">
    <style>
        .register_bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: url('../../images/reg/bg.png') center no-repeat;
            background-size: 100%;
            z-index: 1;
        }

        .home_zhangdui_nav {
            overflow: hidden;
            background: #021349 url('../../images/reg/back.png') 10px center no-repeat;
            background-size: .7rem;
        }
        .guese-logo{
            margin-top: 60px;
            
        }
        
        .VIPNumber{
            width: 58%;
            margin:0 auto;
            height: 37px;
            background: url(../../images/home/bg_team_issue_warname.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .VIPNumber_p{
            text-align: center;
            color: #FFCD29;
            font-size: 0.4rem;
            line-height: 37px;
        }
        .VIPNumber_img{
            max-width: 0.4rem;
            position: absolute;
            right: 15%;
            top: 10px;
        }

        .details{
            width: 70%;
            margin:0 auto;
            background: url(../../images/home/bg_team_issue_message.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 20px;
        }
        .details ul {
            width: 100%;
            padding-top: 16px;
            padding-bottom: 3px;
        }
        .details ul li{
            width: 100%;
            margin-bottom: 16px;
        }
        .left{
            width: 40%;
            display: inline-block;
            text-align: right;
            font-size: .35rem;
            color: #999BC7;
        }
        .right{
            width: 60%;
            font-size: .4rem;
            padding-left: 2%;
            color: #D0D2F7;
        }
        .money_right{
            width: 60%;
            font-size: .4rem;
            padding-left: 2%;
            color: #FFCD29;
        }

        .publish_btn{
            width: 74%;
            height: 60px;
            background: url(../../images/home/btm_home_team_challenge_room_challenge.png) no-repeat;
            background-size: 100% 100%;
            border:none;
            margin-top: 20px;
            margin-left: 13%;
            color: #1D1104;
            text-align: center;
            font-size: .45rem;
            font-weight: 600;
        }
        .model {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
        }

        .name_model>div {
            width: 250px;
            height: 220px;
            background: #1b1d68;
            margin: 0 auto;
            margin-top: 50%;
            text-align: center;
            font-size: .5rem;
            color: #eae3ff;
            z-index: 11;

        }
        .model .edit {
            height: 70PX;
            line-height: 70px;
        }

        .doCancel {
            letter-spacing: 3px;
            color: #D0C7EF;
        }

        .model input {

            width: 80%;
            margin: auto;
            display: block;
            height: 37px;
            background: #121459;
            border: 0;
            color: #eae3ff;
            text-align: center;
            margin-bottom: 40px;
        }

        .model .cancel,
        .model .confirm {
            height: 37px;
            width: 33%;
            background: #1B1D68;
            border: 1px solid #6c6fc7;
            color: #eae3ff;
            font-size: .42rem;
        }

        .model .cancel {
            float: left;
            margin-left: 10%;
        }

        .model .confirm {
            float: right;
            margin-right: 10%;
        }
         .notice {
            text-align: center;
            font-size: .3rem;
            /* margin-bottom: 20px; */
            color: #FF4343;
        }
    </style>
</head>

<body>
    <div class="register_bg">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            <span >挑战战局</span>
        </div>       
        <div class="model name_model">
                <div>
                    <div class="edit">输入房间密码</div>
                    <input id="pwd" class="changeUserName" type="text" name="" value="" id="">
                    <div>
                        <button class="cancel">取消</button>
                        <button class="confirm ">确定</button>
                    </div>
                </div>
        </div>
        <div class="guese-logo">  
            <img src="../../images/home/bg_home_issue _ailin.png" alt="">  
        </div>
        <div class="VIPNumber">
           <p class="VIPNumber_p">VIP123456</p>
            <img src="../../images/home/icon_copy.png" class="VIPNumber_img">
        </div>
        <div class="details">
            <ul>
            </ul>
        </div>
        <button class="publish_btn">挑战战局</button>
        <p class="notice">*该战局手续费：<span class="warfee" id="warfee"></span>%</p>
    </div>
    <script src="../../js/public.js"></script>
    <script>
        $(function(){
            let path  = window.location.href;
            fdRoomNo  = path.split('?')[1].split('=')[1];
            // console.log(fdRoomNo);
            $.post(searchRoom, {
                warNo: fdRoomNo
                }, (res) => {
                console.log(res)
                res.obj.forEach((item, index) => {
                    let roompsw = item.fdWarMode;
                    let roomid=item.fdId;
                    localStorage.roomid = roomid;
                    localStorage.roompsw = roompsw;
                    
                    // console.log(roompsw)
                    $('.VIPNumber_p').text(item.fdWarName);
                    // if(roompsw == 1) {
                    //     $('.name_model').fadeIn();
                    // }
                    let htmllist =`<li>
                    <span class="left">参战人数:</span><span id="fdNum" class="right">${item.fdNum}</span></li>
                    <li><span class="left">下注金额:</span><span id="money" class="money_right">${item.fdAmount}</span></li>
                    <li><span class="left">授权通道:</span><span id="fdNum" class="right">${item.fdChannel}</span></li>
                    <li><span class="left">等待时效:</span><span id="waitTime" class="right">${item.fdWaitTime}</span></li>
                    <li><span class="left">游戏时间:</span><span id="waitTime" class="right">${item.fdStartTime}</span></li>
                    <li><span class="left">对方胜率:</span><span class="right">${item.createWinRate}</span></li>
                    <li style="display:none"><span class="getid">${item.fdId}</span><span class="getmode">${item.fdWarMode}</span><span class="getpsw">${item.fdPwd}</span></li>`;
                    $('.details ul').append(htmllist);
                });             
            });
            //modal 

            $('.publish_btn').click(function(){
                let roompsw = localStorage.roompsw;
                // console.log(roompsw);
                if(roompsw == 1) {
                    $('.name_model').fadeIn();
                }else {
                    //传递参数 id 和房间号
                    let roomNo = fdRoomNo;
                    let roomid = $('.getid').text();
                    let mode = $('.getmode').text();
                    localStorage.pswnum = $('.getpsw').text();
                    $.post(dareUrl,{
                        roomNo,
                        roomid,
                        mode
                    },(res)=>{
                        if (res.code == 100) {
                            alert(res.msg)
                            window.location.href=`./addPic.html?id=`+roomNo;
                            window.event.returnValue = false;
                        } else {
                            alert(res.msg)
                        }
                    });
                }
            })
            //密码弹窗
           $('.confirm').click(function(){
                let roomNo =$('#pwd').val()
                //tzDareUrl
                $.post(searchRoom,{
                    roomNo
                },res=>{
                    // let roomInfo=res.obj[0]
                    console.log(res);
                    if(res.code==0 ){
                        // localStorage.roompsw = 0;
                        // alert('挑战成功')
                        // $('.name_model').fadeOut();
                        let stats = 0
                        res.obj.forEach((item, index) => {
                            if(item.fdRoomNo == fdRoomNo && item.fdPwd == roomNo){
                                alert('密码正确,提交挑战申请中!')
                                stats = 1
                                $('.name_model').fadeOut(); 
                                //传递参数 id 和房间号
                                let roomNo = fdRoomNo;
                                let roomid = $('.getid').text();
                                let mode = $('.getmode').text();
                                let pwd = $('.getpsw').text();
                                localStorage.pswnum = $('.getpsw').text();
                                $.post(dareUrl,{
                                    roomNo,
                                    roomid,
                                    mode,
                                    pwd
                                },(res)=>{
                                    if (res.code == 100) {
                                        alert(res.msg)
                                        window.location.href=`./addPic.html?id=`+roomNo;
                                        window.event.returnValue = false;
                                    } else {
                                        alert(res.msg)
                                    }
                                });
                            }
                        });
                        if(stats == 0){
                            alert('密码错误,挑战失败!')
                        }
                    }
                    if(res.code==500){
                        alert(res.msg)
                    }
                    // localStorage.roomInfo=JSON.stringify(roomInfo)
                    // window.location.href=`./tzzj.html`
                })
            })
            $('.cancel').click(function(){
                $('.name_model').fadeOut();
                // window.location.href=`./ModalFrame.html`
            })
            //手续费
            $.post(warfeeUrl, (res) => {
                fees = res.obj.fdFees * '100';
                // alert(fees)
                $('#warfee').text(fees)
                console.log(res)

            })
        })
    </script>
</body>

</html>